/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { customer as customerApi, follow, security } from "@mall/api-services"
import * as React from "react"
import { RouteComponentProps, withRouter } from "react-router"
import Divider from "../components/divider"
import Icon from "../icon"
import "./index.scss"

interface MyCenterProps extends RouteComponentProps {

}

interface MyCenterState {
  followingProductCount: number;
  followingStoreCount: number;
  customer: customerApi.Customer;
}

class MyCenter extends React.Component<MyCenterProps, MyCenterState> {

  public constructor(props: Readonly<MyCenterProps>) {
    super(props)

    this.state = {
      followingProductCount: 0,
      followingStoreCount: 0,
      customer: new customerApi.Customer(),
    }

    this.refreshFollowCounts = this.refreshFollowCounts.bind(this)
  }

  public componentDidMount(): void {
    this.refreshFollowCounts()
    this.refreshCustomer()
  }

  public render() {
    const { history } = this.props
    const { customer, followingProductCount, followingStoreCount } = this.state

    const userId = security.SecurityUserHolder.getUserId()

    return (
      <div className="my-center">
        <div className="my-center-header">
          <div className="my-center-topbar">
            <Icon type="settings"
                  onClick={() => history.push(`/customers/${userId}/settings`)}/>
          </div>
          <div className="my-center-customer-info">
            <img className="my-center-customer-avatar" alt={userId} src={customer.avatar}/>
            <span className="my-center-customer-nickname" children={customer.nickname}/>
          </div>
          <div className="my-center-record-container">
            <div className="my-center-record-item"
                 onClick={() => history.push(`/customers/${userId}/follow-products`)}>
              <span className="my-center-record-item-count">{followingProductCount}</span>
              <span>商品关注</span>
            </div>
            <div className="my-center-record-item"
                 onClick={() => history.push(`/customers/${userId}/follow-stores`)}>
              <span className="my-center-record-item-count">{followingStoreCount}</span>
              <span>店铺关注</span>
            </div>
            <div className="my-center-record-item">
              <span className="my-center-record-item-count">0</span>
              <span>喜欢的内容</span>
            </div>
            <div className="my-center-record-item"
                 onClick={() => history.push(`/customers/${userId}/browsing-products`)}>
              <span className="my-center-record-item-count">0</span>
              <span>浏览记录</span>
            </div>
          </div>
        </div>
        <div className="my-center-content">
          <div className="my-center-card">
            <div className="my-center-card-title">
              <span>我的订单</span>
              <span className="my-center-card-title-right"
                    onClick={() => history.push(`/orders`)}>查看全部订单<Icon
                type="right"/></span>
            </div>
            <Divider/>
            <div className="my-center-card-content">
              <div className="my-center-orders-container">
                <div className="my-center-orders-item">
                  <Icon type="pay" size="md" className="my-center-orders-item-icon"/>
                  <span className="my-center-orders-item-name">待付款</span>
                </div>
                <div className="my-center-orders-item">
                  <Icon type="send" size="md" className="my-center-orders-item-icon"/>
                  <span className="my-center-orders-item-name">待发货</span>
                </div>
                <div className="my-center-orders-item">
                  <Icon type="deliver" size="md" className="my-center-orders-item-icon"/>
                  <span className="my-center-orders-item-name">待收货</span>
                </div>
                <div className="my-center-orders-item">
                  <Icon type="comment" size="md" className="my-center-orders-item-icon"/>
                  <span className="my-center-orders-item-name">待评价</span>
                </div>
                <div className="my-center-orders-item">
                  <Icon type="refund" size="md" className="my-center-orders-item-icon"/>
                  <span className="my-center-orders-item-name">退款/售后</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  private readonly refreshCustomer = () => {
    const userId = security.SecurityUserHolder.getUserId()
    customerApi.CustomerServiceV1.getCustomer(userId).then(customer => this.setState({ customer }))
  }

  private readonly refreshFollowCounts = () => {
    const { FollowServiceV1 } = follow
    FollowServiceV1.getFollowingProductCount().then(count => this.setState({ followingProductCount: count }))
    FollowServiceV1.getFollowingStoreCount().then(count => this.setState({ followingStoreCount: count }))
  }
}

export default withRouter(MyCenter)
